<template>
  <!--回收案件池-->
  <section class="page system-parameter-manage">
    <data-form :model="queryModel"  @onSearch="refreshData" @handleResetForm="follFeedback" autoSearch>
      <!--输入区域-->
      <template slot="inputs">
        <el-form-item label="借据号" prop="caseNumber">
          <el-input v-model="queryModel.caseNumber"></el-input>
        </el-form-item>
        <el-form-item label="批次号" prop="outBatch">
          <el-input v-model="queryModel.outBatch"></el-input>
        </el-form-item>
        <el-form-item label="客户姓名" prop="personalName">
          <el-input v-model="queryModel.personalName"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobileNo">
          <el-input v-model="queryModel.mobileNo"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="idCard">
          <el-input v-model="queryModel.idCard"></el-input>
        </el-form-item>
        <el-form-item label="地区" prop="area">
          <el-cascader v-model="queryModel.area" :options="$city.getCityData()" change-on-select clearable></el-cascader>
        </el-form-item>
        <el-form-item label="催收员" prop="currentCollector">
          <el-input v-model="queryModel.currentCollector"></el-input>
        </el-form-item>
        <el-form-item label="案件金额" prop="outAmount">
          <number-range v-model="queryModel.outAmount">
          </number-range>
        </el-form-item>
        <el-form-item label="逾期阶段" prop="overduePeriod">
          <el-select v-model="queryModel.overduePeriod" placeholder="请选择" clearable>
            <el-option v-for="{index,name,code} in $dict.getDictData('OverduePeriodStatus')" :key="index" :label="name" :value="code.replace(/M|\+/, '')"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="逾期天数" prop="overdueDays">
          <number-range v-model="queryModel.overdueDays">
          </number-range>
        </el-form-item>
        <el-form-item label="行动代码" prop="followupBack">
          <el-select v-model="queryModel.followupBack" placeholder="请选择" clearable>
            <el-option v-for="{name,id} in customDataDict.filter(v=>v.dataType==='FOLLOW_UP').filter(m=>m.name!=='行动代码')" :key="id" :label="name" :value="id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="流转来源" prop="turnSource">
          <el-select v-model="queryModel.turnSource" placeholder="请选择" clearable>
            <el-option v-for="{index,name,code} in $dict.getDictData('TurnSource').filter(m=>m.name!=='委外'&&m.name!=='API接口'&&m.name!=='Excel导入')" :key="index" :label="name" :value="code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="系统来源" prop="sysCode">
          <el-select v-model="queryModel.sysCode" placeholder="请选择" clearable>
            <el-option v-for="{index,name,code} in $dict.getDictData('SysCode')" :key="index" :label="name" :value="code.replace(/M|\+/, '')"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品名称" prop="productName">
          <el-input v-model="queryModel.productName"></el-input>
        </el-form-item>
        <el-form-item label="案件流入时间" prop="followInTime">
          <el-date-picker v-model="queryModel.followInTime" type="daterange" :editable="false" placeholder="选择日期时间" clearable>
          </el-date-picker>
        </el-form-item>
      </template>
    </data-form>
    <data-box @onPageChange="refreshData" :data="dataList" :selectionList.sync="selectionList" :page="pageService">
      <template slot="buttons">
        <el-button @click="moveIntoAllocated" v-auth = "1018" >移入委外待分配</el-button>
        <el-button @click="applyTurn" v-auth = "1019">申请流转</el-button>
        <el-button @click="manualDivision" v-auth = "1019">重新分配</el-button>
      </template>
      <template slot="columns">
        <!--数据列区域-->
        <el-table-column prop="caseNumber" label="借据号" :min-width="$helper.getColumnWidth(6)">
          <template slot-scope="scope">
            <a  @click="openExecutionPage(scope.row)">{{scope.row.caseNumber}}</a>
          </template>
        </el-table-column>
        <el-table-column prop="outBatch" label="批次号" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
        <el-table-column prop="outsName" label="委外方" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
        <el-table-column prop="personalName" label="客户姓名" :min-width="$helper.getColumnWidth(5)">
        </el-table-column>
        <el-table-column prop="mobileNo" label="手机号" :formatter="(row)=>$filter.encryptPhone(row.mobileNo)" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
        <el-table-column prop="idCard" label="身份证号" :formatter="(row)=>$filter.encryptIDCardFour(row.idCard)" :min-width="$helper.getColumnWidth(6)">
        </el-table-column>
        <el-table-column prop="area" label="地区" :min-width="$helper.getColumnWidth(3)" :formatter="(row) => $city.getCityName(Number(row.area))" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="overdueAmount" label="案件金额(元)" :min-width="$helper.getColumnWidth(3)">
        </el-table-column>
        <el-table-column prop="overduePeriod" label="逾期阶段" :min-width="$helper.getColumnWidth(3)">
        </el-table-column>
        <el-table-column prop="overdueDays" label="逾期天数" :min-width="$helper.getColumnWidth(3)">
        </el-table-column>
        <el-table-column prop="sysCode" label="系统来源" :formatter="(row) => $filter.encryptSysCode(row.sysCode)" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="productName" label="产品名称" :min-width="$helper.getColumnWidth(3)">
        </el-table-column>
        <el-table-column prop="turnSource" label="流转来源" :formatter="(row) => $filter.dictConvert(row.turnSource,'TurnSource')" :min-width="$helper.getColumnWidth(3)">
        </el-table-column>
        <el-table-column prop="followInTime" label="案件流入时间" :min-width="$helper.getColumnWidth(5)" :formatter="(row) => $filter.dateTimeFormat(row.followInTime)">
        </el-table-column>
        <el-table-column prop="caseAllocationTime" label="案件分配时间" :min-width="$helper.getColumnWidth(5)" :formatter="(row) => $filter.dateTimeFormat(row.caseAllocationTime)">
        </el-table-column>
        <el-table-column prop="followupTime" label="跟进时间" :min-width="$helper.getColumnWidth(5)" :formatter="(row) => $filter.dateTimeFormat(row.followupTime)">
        </el-table-column>
        <el-table-column prop="followupBack" label="行动代码" :formatter="(row) => $filter.dictcustomConvert(row.followupBack)" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
        <el-table-column prop="lawerStatus" label="诉讼状态" :min-width="$helper.getColumnWidth(3)" :formatter="(row) => $filter.dictConvert(row.lawerStatus,'LawerStatus')">
        </el-table-column>
        <el-table-column prop="unCheatResult" label="反欺诈结果" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
      </template>
    </data-box>

    <!--弹框-申请流转-->
    <el-dialog title="流转申请" @close="dialog.applyFlow = false" :visible.sync="dialog.applyFlow" :close-on-click-modal="false" :show-close="false">
      <apply-flow :fromChannel="caseChannel"  @close="dialog.applyFlow=false;refreshData()" @refreshList="refreshData" ref="applyFlow" :selectionList="selectionList"></apply-flow>
    </el-dialog>
    <!-- 重新分配 -->
    <el-dialog title="选择委外方" @close="dialog.selectShouTuoFang = false" :visible.sync="dialog.selectShouTuoFang" :close-on-click-modal="false" :show-close="false">
      <select-shou-tuo-fang :isHidden="true" :isLawsuit="false" :selectedCaseIds="selectedCaseIds" @close="dialog.selectShouTuoFang=false;refreshData()" @success="refreshData"></select-shou-tuo-fang>
    </el-dialog>
  </section>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { Auth, Layout, Dependencies } from '~/core/decorator';
import DataForm from '~/components/common/data-form.vue';
import DataBox from '~/components/common/data-box.vue';
import NumberRange from '~/components/common/number-range.vue';
import ApplyFlow from '~/components/outsource-manage/recycle-manage/apply-flow.vue'; // 案件分配
import SelectShouTuoFang from '~/components/outsource-manage/recycle-manage/select-shou-tuo-fang.vue'; // 选择受托方
import { PageService } from '~/utils/page.service';
import { SortService } from '~/utils/sort.service';
import { OutsourceRecycleService } from '~/services/domain-service/outsource-recycle-manage.service';
import { CityService } from '~/utils/city.service';
import { OpenExecutionData } from "~/config/types";
import { ApplyType, CASE_CHANNEL, CASE_HALT_CATEGORY, } from '~/config/enum.config';
import { Mutation, Getter, namespace, State } from 'vuex-class';
const CollectionExecutionModule = namespace('collection-execution');

// @Auth(1006)
@Layout('workspace')
@Component({
  components: {
    DataForm,
    DataBox,
    NumberRange,
    ApplyFlow,
    SelectShouTuoFang
  },
})
export default class RecycleManageIndex extends Vue {
  @Dependencies(OutsourceRecycleService)
  private outsourceRecycleService: OutsourceRecycleService;
  @Dependencies(PageService)
  private pageService: PageService;
  @Dependencies(SortService)
  private sortService: SortService;
  @CollectionExecutionModule.Action private openCollectionExecution;

  @State private customDataDict;

  private caseChannel = CASE_CHANNEL.OUTER;

  private dialog: any = {
    applyFlow: false,
    selectShouTuoFang:false
  };
  private proinviceList: any[] = []; // 省
  private cityList: any[] = []; //市

  private queryModel: any = {
    outBatch: '',
    caseNumber: '',
    personalName: '',
    mobileNo: '',
    idCard: '',
    localAddress: '',
    currentCollector: '',
    overduePeriod: '',
    turnSource: '',
    followupBack:'',
    sysCode: '',
    productName: '',
    followInTime: [],
    area: [],
    outAmount: {
      max: '',
      min: '',
    },
    overdueDays: {
      max: '',
      min: '',
    },
  };
  private dataList: any[] = []; //数据列表
  private selectionList: any[] = []; //选中数据

  private mounted() {
    this.refreshData();
    this.getProvinces();
  }

  //获取省数据
  private getProvinces() {
    this.proinviceList = CityService.getCityData({ level: 1 });
  }

  //获取市
  private getCitys(provinceId) {
    if(this.queryModel.cityCode){
      this.queryModel.cityCode = ''
    }
    this.cityList = this.$city.getCityData({ level: 1, id: provinceId }); // 城市列表
  }
  // 重新分配
  private manualDivision(){
    if(this.selectionList.length === 0){
      this.$message("请先选择要重新分配的案件")
      return
    }
    this.dialog.selectShouTuoFang = true
  }
  private get selectedCaseIds() {
    return this.selectionList.map(v => v.id)
  }
  /**
   * 移入委外待分配
   */
  private moveIntoAllocated() {

    if (this.selectionList.length === 0) {
      this.$message.info('请选择需要移入委外待分配的案件');
      return;
    }

    const temp: any[] = [];
    this.selectionList.map((value) => {
      temp.push(value.id);
    });
    const query = {
      caseIds: temp,
    };
    //移入委外待分配
    this.outsourceRecycleService.caseMoveAllocation(query).subscribe(
      (data) => {
        this.refreshData();
        this.$message.success('移入待分配案件成功!');
      }
    );
  }

  /**
   * 申请流转
   */
  private applyTurn(){
      if (this.selectionList.length === 0) {
        this.$message.info('请选择需要申请流转的案件');
        return;
      }
      this.dialog.applyFlow = true;
    }

  private refreshData() {
    this.selectionList = []
    //默认加载列表
    this.outsourceRecycleService.caseOutRecoveryList(this.queryModel,this.pageService).subscribe(
      (data) => {
        this.dataList = data;
        if(this.dataList){
          this.dataList.forEach(x=>{
            x.overduePeriod>12?x.overduePeriod = 'M12+':x.overduePeriod = 'M'+x.overduePeriod
          })
        }
      }
    );
  }

  /**
   * 进入查看执行页
   */
  private openExecutionPage(row) {
    this.openCollectionExecution(new OpenExecutionData(row.id, row.caseNumber, CASE_CHANNEL.OUTER, true,true))
  }
  /**
   * 重置numberRange
   */
  private follFeedback() {
    this.queryModel.outAmount = { min: '', max: '' };
    this.queryModel.overdueDays = { min: '', max: '' };
    this.queryModel.proinviceCode = '';
    this.queryModel.cityCode = '';
  }
}
</script>

<style lang="less" >
</style>
